<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>metisMenu & animate.css</title>

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">

  <link rel="stylesheet" href="metisMenu.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css">
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">metisMenu</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="index.html">Vertical Menu</a></li>
          <li><a href="metisFolder.html">Folder View</a></li>
          <li><a href="hover.html">Hover Option For Desktop</a></li>
          <li><a href="zurb.html">Foundation | Zurb</a></li>
          <li class="active"><a href="animate.html">Animate</a></li>
          <li><a href="event.html">Event</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>



  <div class="clearfix">
    <aside class="sidebar">
      <nav class="sidebar-nav">
        <ul class="metismenu" id="menu">
          <li class="active">
            <a href="#" aria-expanded="true">
              <span class="sidebar-nav-item-icon fa fa-github fa-lg"></span>
              <span class="sidebar-nav-item">metisMenu</span>
              <span class="fa arrow"></span>
            </a>
            <ul aria-expanded="true">
              <li>
                <a href="https://github.com/onokumus/metisMenu">
                  <span class="sidebar-nav-item-icon fa fa-code-fork"></span>
                  Fork
                </a>
              </li>
              <li>
                <a href="https://github.com/onokumus/metisMenu">
                  <span class="sidebar-nav-item-icon fa fa-star"></span>
                  Star
                </a>
              </li>
              <li>
                <a href="https://github.com/onokumus/metisMenu/issues">
                  <span class="sidebar-nav-item-icon fa fa-exclamation-triangle"></span>
                  Issues
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" aria-expanded="false">Bounce<span class="fa arrow"></span></a>
            <ul aria-expanded="false" class="animated bounce">
              <li>
                <a href="#">bounceIn</a>
                <ul class="animated bounceIn">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">bounceInDown</a>
                <ul class="animated bounceInDown">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">bounceInLeft</a>
                <ul class="animated bounceInLeft">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">bounceInRight</a>
                <ul class="animated bounceInRight">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">bounceInUp</a>
                <ul class="animated bounceInUp">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" aria-expanded="false">Fade<span class="glyphicon arrow"></span></a>
            <ul aria-expanded="false" class="animated fade">
              <li>
                <a href="#">fadeIn</a>
                <ul class="animated fadeIn">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInDown</a>
                <ul class="animated fadeInDown">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInDownBig</a>
                <ul class="animated fadeInDownBig">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInLeft</a>
                <ul class="animated fadeInLeft">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInLeftBig</a>
                <ul class="animated fadeInLeftBig">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInRight</a>
                <ul class="animated fadeInRight">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInRightBig</a>
                <ul class="animated fadeInRightBig">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInUp</a>
                <ul class="animated fadeInUp">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInUpBig</a>
                <ul class="animated fadeInUpBig">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" aria-expanded="false">Flip<span class="fa arrow"></span></a>
            <ul aria-expanded="false" class="animated flip">
              <li>
                <a href="#">flipInX</a>
                <ul class="animated flipInX">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">flipInY</a>
                <ul class="animated flipInY">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" aria-expanded="false">Zoom<span class="fa arrow"></span></a>
            <ul aria-expanded="false" class="animated swing">
              <li>
                <a href="#">zoomIn</a>
                <ul class="animated zoomIn">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">zoomInDown</a>
                <ul class="animated zoomInDown">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">zoomInLeft</a>
                <ul class="animated zoomInLeft">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">zoomInRight</a>
                <ul class="animated zoomInRight">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">zoomInUp</a>
                <ul class="animated zoomInUp">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
            </ul>
          </li>

          <li>
            <a href="#" aria-expanded="false">Slide<span class="fa arrow"></span></a>
            <ul aria-expanded="false" class="animated shake">
              <li>
                <a href="#">slideInDown</a>
                <ul class="animated slideInDown">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">slideInLeft</a>
                <ul class="animated slideInLeft">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">slideInRight</a>
                <ul class="animated slideInRight">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">slideInUp</a>
                <ul class="animated zoomInRight">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">slideInUp</a>
                <ul class="animated zoomInUp">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </aside>
    <section class="content">
      <div class="col-xs-12">
        <h3>Support Animate
          <small>with <a href="http://daneden.github.io/animate.css/">animate.css</a></small>
        </h3>
        <div class="panel panel-default">
          <div class="panel-heading">
            Code
            <span class="pull-right">
              <span class="fa fa-code"></span>
            </span>
          </div>
          <div class="panel-body">
            <pre><code class="language-markup">&lt;li class="animated bounce"&gt; ... &lt;/li&gt;</code></pre>

          </div>
        </div>
      </div>
    </section>
  </div>

  <script src="jquery/dist/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="metisMenu.js"></script>

  <script>
    $(function() {

      $('#menu').metisMenu();

    });
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
</body>

</html>
